import React from 'react'
import { Link } from 'react-router-dom'

import { Menu } from 'antd';

import logo from '../../assets/imges/logo.png'

import menuConfig from '../../config/menuConfig'
import memoryUtils from '../../utils/memoryUtils'

import './index.less'




export default function LeftNav() {
    const getMenu = React.useMemo(() => (menuConfig) => {
        function getItem(label, key, icon, children) {
            return {
                key,
                icon,
                children,
                label,
            };
        }
        const items = menuConfig?.map((item) => {
            if (!item.children) {
                return (
                    getItem(item.title, item.key, item.icon)
                )
            } else {
                return (
                    getItem(item.title, item.key, item.icon, getMenu(item.children))
                )
            }
        })
        return items
    }, [])

    const menus = React.useMemo(() => getMenu(menuConfig), [menuConfig, getMenu])

    return (
        <div className="left-nav">
            <Link to="/home" className="logo-link">
                <img src={logo} alt="logo" />
                <h1>后台管理系统</h1>
            </Link>
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={menus} />
        </div>
    )
}
